<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>04-creatRef的使用</title>
  <script src="../其他/js/react.development.js"></script>
  <script src="../其他/js/react-dom.development.js"></script>
  <!-- Don't use this in production: -->
  <script src="../其他/js/babel.min.js"></script>
  <!-- 添加了一个 PropTypes 对象, 可以对props属性进行限制 -->
  <script src="https://cdn.staticfile.org/prop-types/15.5.10/prop-types.js"></script>
</head>
<body>
  <div id="test"></div>
  <script type="text/babel">
      class Demo extends React.Component {
        /*
          （1）.通过Onxxx属性指定事件处理函数注意大小写
              a.React使用的是自定义（合成）事件，而不是使用的原生DOM事件
              b.React中的事件是通过事件委托方式处理的委托给组件最外层的元素
          （2）.通过event.target得到发生事件的DOM元素对象
        */
        // ref创建
        myRef = React.createRef()
        myRef2 = React.createRef()
        showData1 = () => {
          console.log(this.myRef); // {current: input}
        alert(this.myRef.current.value)
        }
        showData2 = () => {
          alert(this.myRef.current.value)
        }
        render() {
          return (
            <div>
              <input ref={this.myRef} type="text" placeholder="输入文字"/> &nbsp;
              <button onClick={this.showData1}>点我提示左侧文字</button> &nbsp;
              <input ref={this.myRef2} onBlur={this.showData2} type="text" placeholder="失去焦点显示文字" />
            </div>
          )
        }
      }
      ReactDOM.render(<Demo/>, document.getElementById('test'))
  
  </script>
</body>
</html>